<!-- 游客年龄分布 -->
<template>
  <CPanel class="age-distribution">
    <template #header>公租房租赁情况</template>
    <template #content>
      <CEcharts ref="chartRef" :option="option" @onload="startHighlightLoop" />
    </template>
  </CPanel>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"
import * as echarts from "echarts"
import CPanel from "@/components/common/CPanel.vue"
import CEcharts from "@/components/common/CEcharts.vue"
import type { EChartsOption, TooltipComponentOption, CustomSeriesOption, BarSeriesOption } from "echarts"

const option = ref<EChartsOption>({})
const chartRef = ref()
let highlightTimer: any = null
let currentIndex = 0

// 修改数据定义，使用新的公租房数据
// A区-F区的已出租和待出租数据
const rentedData = [200, 180, 150, 250, 180, 197] // 已出租数据
const availableData = [300, 320, 350, 250, 320, 318] // 待出租数据

// 高亮循环方法
const startHighlightLoop = (chart: any) => {
  if (!chart) { return }

  // 如果已经存在定时器，先清除
  if (highlightTimer) {
    clearInterval(highlightTimer)
    highlightTimer = null
  }

  // 计算总的区域数
  const totalRegions = rentedData.length
  
  highlightTimer = setInterval(() => {
    // 取消之前的高亮
    chart.dispatchAction({
      type: "downplay"
    })
    // 高亮当前柱子（两个系列都需要高亮）
    chart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: currentIndex
    })
    chart.dispatchAction({
      type: "highlight",
      seriesIndex: 1,
      dataIndex: currentIndex
    })
    // 更新索引，循环
    currentIndex = (currentIndex + 1) % totalRegions
  }, 1500)
}

const createEchartBar = (): EChartsOption => {
  const offsetX = 10
  const offsetY = 5
  
  // 创建左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx: any, shape: any) {
      const xAxisPoint = shape.xAxisPoint
      const c0 = [shape.x, shape.y]
      const c1 = [shape.x - offsetX, shape.y - offsetY]
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1]]
      const c3 = [xAxisPoint[0], xAxisPoint[1]]
      ctx.moveTo(c0[0], c0[1])
      ctx.lineTo(c1[0], c1[1])
      ctx.lineTo(c2[0], c2[1])
      ctx.lineTo(c3[0], c3[1])
      ctx.closePath()
    }
  })
  
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx: any, shape: any) {
      const xAxisPoint = shape.xAxisPoint
      const c1 = [shape.x, shape.y]
      const c2 = [xAxisPoint[0], xAxisPoint[1]]
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1]]
      const c4 = [shape.x + offsetX, shape.y - offsetY]
      ctx.moveTo(c1[0], c1[1])
      ctx.lineTo(c2[0], c2[1])
      ctx.lineTo(c3[0], c3[1])
      ctx.lineTo(c4[0], c4[1])
      ctx.closePath()
    }
  })
  
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx: any, shape: any) {
      const c1 = [shape.x, shape.y]
      const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
      const c3 = [shape.x, shape.y - offsetX]
      const c4 = [shape.x - offsetX, shape.y - offsetY]
      ctx.moveTo(c1[0], c1[1])
      ctx.lineTo(c2[0], c2[1])
      ctx.lineTo(c3[0], c3[1])
      ctx.lineTo(c4[0], c4[1])
      ctx.closePath()
    }
  })
  
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft)
  echarts.graphic.registerShape("CubeRight", CubeRight)
  echarts.graphic.registerShape("CubeTop", CubeTop)

  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      formatter: function (params: any) {
        // 修改提示框格式，显示区域、状态和数量
        const region = params[0].name
        const status = params[0].seriesName
        const value = params[0].value
        const percentage = ((value / 3872) * 100).toFixed(1)
        return `${region}<br/>${status}: ${value}套 (${percentage}%)`
      }
    } as TooltipComponentOption,
    grid: {
      left: "0%",
      right: "0%",
      top: "20%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      // 修改横轴为A区-F区
      data: ["A区", "B区", "C区", "D区", "E区", "F区"],
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: "rgba(76, 93, 130, 1)"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "rgba(201, 211, 234, 1)"
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false
      },
      // 修改纵轴名称
      name: "套",
      nameTextStyle: {
        color: "rgba(201, 211, 234, 1)",
        fontSize: 14,
        padding: [0, 32, 12, 0]
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(49, 58, 86, 1)"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 14,
        color: "rgba(201, 211, 234, 1)"
      }
    },
    series: [
      {
        name: "已出租",
        type: "custom",
        renderItem: (_params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(114, 138, 192, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(68, 95, 156, 1)"
                    }
                  ])
                },
                // hover样式
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(175, 111, 23, 1)"
                      }
                    ])
                  }
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(161, 186, 244, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(104, 134, 202, 1)"
                    }
                  ])
                },
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(175, 111, 23, 1)"
                      }
                    ])
                  }
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(198, 213, 244, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(198, 213, 244, 1)"
                    }
                  ])
                },
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(230, 165, 75, 1)"
                      }
                    ])
                  }
                }
              }
            ]
          }
        },
        data: rentedData
      } as unknown as CustomSeriesOption,
      {
        name: "待出租",
        type: "custom",
        renderItem: (_params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(255, 168, 50, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(248, 124, 49, 1)"
                    }
                  ])
                },
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(175, 111, 23, 1)"
                      }
                    ])
                  }
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(255, 215, 145, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 185, 105, 1)"
                    }
                  ])
                },
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(175, 111, 23, 1)"
                      }
                    ])
                  }
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(255, 235, 200, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 235, 200, 1)"
                    }
                  ])
                },
                emphasis: {
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(230, 165, 75, 1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(230, 165, 75, 1)"
                      }
                    ])
                  }
                }
              }
            ]
          }
        },
        data: availableData
      } as unknown as CustomSeriesOption,
      // 添加透明的bar系列用于显示标签
      {
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "top",
            fontSize: 14,
            color: "rgba(201, 211, 234, 1)",
            offset: [0, -25]
          }
        },
        itemStyle: {
          color: "transparent"
        },
        tooltip: {},
        data: rentedData.map((val, index) => val + availableData[index])
      } as BarSeriesOption
    ]
  }
}

onMounted(() => {
  option.value = createEchartBar()
})

onUnmounted(() => {
  if (highlightTimer) {
    clearInterval(highlightTimer)
  }
})
</script>

<style lang="scss" scoped></style>
